<template>
  <div class="linechart">
    <div ref="line" class="line"></div>
  </div>
</template>

<script>
import { Area } from '@antv/g2plot'
export default {
  props: ['data', 'smooth'],
  mounted () {
    const linePlot = new Area(this.$refs.line, {
      height: 240,
      forceFit: true,
      data: this.data,
      xField: 'type',
      yField: 'value',
      // 平滑线
      smooth: this.smooth,
      // 折线颜色
      line: {
        style: {
          stroke: '#00b8d4'
        }
      },
      // 水平轴
      xAxis: {
        visible: true,
        tickCount: this.data.length + 2, // 刻度数
        label: { autoRotate: true }
      },
      // 纵轴
      yAxis: {
        title: {
          visible: true,
          style: {
            fontSize: '8px'
          }
        }
      },
      // 折线点
      point: {
        visible: true,
        size: 4,
        shape: 'circle',
        style: {
          fill: 'white',
          stroke: '#00b8d4',
          lineWidth: 2
        }
      },
      // 填充区域
      areaStyle: {
        fill: '#00b8d4',
        opacity: 0.3
      }
    })
    linePlot.render()
  }
}
</script>

<style lang="less" scoped>
.linechart {
  opacity: 1;
  //   background-color: #2593fc;
}
</style>
